<template>
  <view class="free-deposit-wrapper">
    <ve-card>
      <ve-cell-price label="扣款金额" :value="cutPaymentDetail.changeDepositAmount" />
      <ve-cell label="状态">
        <!-- 1：请求中 2：成功 3：失败 -->
        <view
          :class="{
            'status-1': cutPaymentDetail.status == 1,
            'status-2': cutPaymentDetail.status == 2,
            'status-3': cutPaymentDetail.status == 3,
          }"
          >{{ cutPaymentDetail.statusName }}</view
        >
      </ve-cell>
    </ve-card>
    <ve-card title="押金抵扣类型：租车费用" type="blue" v-if="cutPaymentDetail.carFeeList && cutPaymentDetail.carFeeList.length > 0">
      <view class="record-item" v-for="(record, index) in cutPaymentDetail.carFeeList" :key="index">
        <ve-cell label="自有订单号">{{ record.orderCode }}</ve-cell>
        <ve-cell label="费用名称">{{ record.feeName }}</ve-cell>
        <ve-cell-price label="扣款金额" :value="record.cutPaymentAmountStr" />
      </view>
    </ve-card>
    <ve-card
      title="押金抵扣类型：违章费用"
      type="blue"
      v-if="cutPaymentDetail.violationFeeList && cutPaymentDetail.violationFeeList.length > 0"
    >
      <view class="record-item" v-for="(record, index) in cutPaymentDetail.violationFeeList" :key="index">
        <ve-cell label="违章单号">{{ record.violationCode }}</ve-cell>
        <ve-cell label="关联订单号">{{ record.orderCode }}</ve-cell>
        <ve-cell label="费用名称">{{ record.feeName }}</ve-cell>
        <ve-cell-price label="扣款金额" :value="record.cutPaymentAmountStr" />
      </view>
    </ve-card>
  </view>
</template>
<script setup>
  import { ref } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  import { getCutPaymentDetail } from '@/api/order/sOrder'

  // 押金扣款详情
  const cutPaymentDetail = ref({})
  onLoad((options) => {
    // 押金扣款记录
    getCutPaymentDetail({ id: options.id }).then((res) => {
      const result = res.result
      cutPaymentDetail.value = result
    })
  })
</script>
<style lang="less" scoped>
  page {
    background: #f7f8fa;
  }
  .free-deposit-wrapper {
    padding: 24rpx;
    .status-1 {
      color: #ff7d00;
    }
    .status-2 {
      color: #00b42a;
    }
    .status-3 {
      color: #f53f3f;
    }
    .record-item {
      margin: 24rpx 0;
      background: #f7f8fa;
      padding: 24rpx;
      .ve-cell {
        margin: 0;
        /deep/ .ve-cell-title {
          width: 150rpx;
        }
      }
      .ve-cell + .ve-cell {
        margin-top: 8rpx;
      }
    }
  }
</style>
